<template>
  <div class="comput-result">
    <div class="result-box">
      <div class="tabs-box">
        <div class="tabs-title">
          <el-input v-model="state.name" placeholder="请输入" clearable>
            <template #append>
              <el-icon @click="handleClickIcon(state.name)"><Search /></el-icon>
            </template>
          </el-input>
        </div>

        <el-tree
          highlight-current
          style="max-width: 600px"
          :data="state.sectionArr"
          node-key="id"
          :current-node-key="4"
          :props="defaultProps"
          default-expand-all
          @node-click="handleClickTabs"
        >
          <template #default="{ node, data }">
            <el-tooltip
              class="item"
              effect="dark"
              placement="top"
              :content="node.label"
              :disabled="node.label.length < 6"
            >
              <div class="tree-item">
                <span class="node">{{ node.label }}</span>
              </div>
            </el-tooltip>
            <el-icon
              v-if="!data?.children"
              class="position-btn"
              @click="handleClickTabsPosion(data)"
              ><Position
            /></el-icon>
          </template>
        </el-tree>
      </div>
      <div class="box-right">
        <div class="switch-box">
          <div class="right-btn-plus">
            <div class="top-box">
              <div class="top-box-left">
                <div class="title">
                  <div class="left-title">调度方案：</div>
                  <div class="left-list" v-if="props.scNameObj.type != '智能预报'">
                    <el-checkbox-group v-model="state.checkValue" @change="handleCheckBox">
                      <el-checkbox
                        v-for="(item, index) in state.childSchemeList"
                        :key="index"
                        :label="item.scid"
                        >{{ item.modelName + '-' + item.disTypeName }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </div>
                  <div class="left-list" v-else>
                    {{ props.scNameObj.scNameTitle }}
                  </div>
                </div>
                <div class="check">
                  智能水文：
                  <el-checkbox v-model="state.checkedSw" label="" size="large" />
                </div>
              </div>

              <div class="top-box-right">
                <el-button
                  v-if="props.showBtn"
                  type="info"
                  class="btn-plus"
                  @click="handleAmplify"
                  link
                >
                  <el-icon>
                    <FullScreen />
                  </el-icon>
                </el-button>
              </div>
            </div>
            <div class="bottom-btn-box">
              <!-- 图混表 -->
              <div class="ul-box">
                <div
                  v-for="(item, index) in state.showBgItem"
                  :key="index"
                  :class="['ul-item', state.flagItem == index ? 'clickBg' : '']"
                  @click="handleClickShow(index)"
                >
                  {{ item }}
                </div>
              </div>

              <div class="water-name">{{ state.blkcdName }}</div>

              <div class="flex-right-box">
                <span class="key">推荐模型：</span>
                <span class="value">{{ state.modelNamePush || '--' }}</span>
              </div>
            </div>
          </div>
          <div class="echarts-container">
            <div class="echarts-table-box">
              <div class="echarts-box" v-show="state.tableShow">
                <SwDispatchChart
                  chart-key="detail"
                  v-if="state.waterFlag == 1"
                  height="100%"
                  :x-labels="state.sysTimes"
                  :servers="state.servers"
                  :znData="state.checkedSw ? state.znData : ''"
                />
                <SkDispatchChart
                  chart-key="detail"
                  v-else
                  height="100%"
                  :x-labels="state.sysTimes"
                  :servers="state.servers"
                  :znData="state.checkedSw ? state.znData : ''"
                />
              </div>
              <div
                :class="['table-box', state.tableShow ? '' : 'table-box-show']"
                v-show="!state.showTable"
              >
                <el-table :data="state.servers[0]?.ccResult" border v-if="state.waterFlag == 2">
                  <el-table-column prop="tm" label="时间" align="center">
                    <!-- <el-table-column
                      v-for="(item, index) in state.servers"
                      :label="item.scName"
                      :key="index"
                      :show-overflow-tooltip="true"
                      align="center"
                    >
                    <template #default="scope">
                     <div v-if="item==scope.row.name">
                      {{ scope.row.tm }}
                    </div>
                    </template> -->

                    <!-- <template #default="scope">
                        {{ scope.row. }}
                      </template> -->
                    <!-- <el-table :data="item.ccResult" style="width: 100%">
                        <el-table-column prop="tm" label="" width="width"> </el-table-column>
                      </el-table> -->
                    <!-- </el-table-column> -->
                  </el-table-column>
                  <el-table-column prop="fp" label="降雨量" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column prop="jp" label="净雨值" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="入库流量（实测/预报）"
                    show-overflow-tooltip
                    align="center"
                  >
                    <template #default="{ row }">
                      {{ `${row.rq !== '' ? row.rq : '--'}/${row.fq !== '' ? row.fq : '--'}` }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="出库流量（实测/预报）"
                    show-overflow-tooltip
                    align="center"
                  >
                    <template #default="{ row }">
                      {{
                        `${row.rotq !== '' ? row.rotq : '--'}/${row.otq !== '' ? row.otq : '--'}`
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="水库水位（实测/预报）"
                    show-overflow-tooltip
                    align="center"
                  >
                    <template #default="{ row }">
                      {{ `${row.rzr !== '' ? row.rzr : '--'}/${row.zr !== '' ? row.zr : '--'}` }}
                    </template>
                  </el-table-column>
                </el-table>
                <el-table :data="state.servers[0]?.ccResult" border v-else>
                  <el-table-column prop="tm" label="时间" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column prop="fp" label="降雨量" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column prop="jp" label="净雨值" show-overflow-tooltip align="center">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="河道流量（实测/预报）"
                    show-overflow-tooltip
                    align="center"
                  >
                    <template #default="{ row }">
                      {{ `${row.rq !== '' ? row.rq : '--'}/${row.fq !== '' ? row.fq : '--'}` }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="河道水位（实测/预报）"
                    show-overflow-tooltip
                    align="center"
                  >
                    <template #default="{ row }">
                      {{ `${row.rz !== '' ? row.rz : '--'}/${row.fz !== '' ? row.fz : '--'}` }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="dropDown-box">
              <el-collapse v-model="state.activeName" @change="handleDialog">
                <el-collapse-item name="1">
                  <template #title>
                    <div class="coll-title">
                      <div class="ip-word">
                        <span>特征统计:</span>
                      </div>

                      <div class="ip-icon">
                        <i :class="state.collapseActiveSource ? 'downArrow2' : 'downArrow1'"></i>
                      </div>
                    </div>
                  </template>
                  <div class="coll-main">
                    <!-- 水库 -->
                    <el-table :data="state.servers" style="width: 100%" v-if="state.waterShow == 1">
                      <el-table-column align="center" label="是否选用">
                        <template #default="{ row }">
                          <!-- {{ handleIspush(row) }} -->
                          <el-radio
                            v-model="state.radioItem"
                            :label="row.scid"
                            @change="handleSelectionChange(row)"
                          >
                            &nbsp;
                          </el-radio>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="modelName"
                        label="预报模型"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column
                        prop="disType"
                        label="调度类型"
                        align="center"
                        show-overflow-tooltip
                      />

                      <el-table-column
                        label="实测/计算入流洪峰"
                        align="center"
                        show-overflow-tooltip
                        width="150"
                      >
                        <template #default="{ row }">
                          {{
                            `${row.rlMxq != '' && row.rlMxq != undefined ? row.rlMxq : '--'}/${
                              row.rlMxq != '' && row.rlMxq != undefined ? row.fcMxq : '--'
                            }`
                          }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="实测/计算入流洪现时间"
                        align="center"
                        show-overflow-tooltip
                        width="180"
                      >
                        <template #default="{ row }">
                          {{
                            `${row.rlMxt !== '' && row.rlMxt != undefined ? row.rlMxt : '--'}/${
                              row.rlMxt !== '' && row.rlMxt != undefined ? row.fcMxt : '--'
                            }`
                          }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="实测/计算入流洪量"
                        align="center"
                        show-overflow-tooltip
                        width="150"
                      >
                        <template #default="{ row }">
                          {{
                            `${row.fcV !== '' && row.fcV != undefined ? row.rlV : '--'}/${
                              row.fcV !== '' && row.fcV != undefined ? row.fcV : '--'
                            }`
                          }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="实测/计算最高库水位"
                        align="center"
                        show-overflow-tooltip
                        width="150"
                      >
                        <template #default="{ row }">
                          {{
                            `${row.fcMxz !== '' && row.fcMxz != undefined ? row.rlMxz : '--'}/${
                              row.fcMxz !== '' && row.fcMxz != undefined ? row.fcMxz : '--'
                            }`
                          }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="实测/计算最大出流"
                        align="center"
                        show-overflow-tooltip
                        width="150"
                      >
                        <template #default="{ row }">
                          {{
                            `${
                              row.fcMxotq !== '' && row.fcMxotq != undefined ? row.rlMxotq : '--'
                            }/${
                              row.fcMxotq !== '' && row.fcMxotq != undefined ? row.fcMxotq : '--'
                            }`
                          }}
                        </template>
                      </el-table-column>

                      <el-table-column
                        prop="flCoef"
                        label="产流系数"
                        align="center"
                        show-overflow-tooltip
                      />
                    </el-table>
                    <!-- 水文 -->
                    <el-table :data="state.servers" style="width: 100%" v-if="state.waterShow == 2">
                      <el-table-column align="center" prop="prop" label="是否选用">
                        <template #default="{ row }">
                          <!-- {{ handleIspush(row) }} -->
                          <el-radio
                            v-model="state.radioItem"
                            :label="row.scid"
                            @change="handleSelectionChange(row)"
                          >
                            &nbsp;
                          </el-radio>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="modelName"
                        label="预报模型"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column
                        prop="disType"
                        label="调度类型"
                        align="center"
                        show-overflow-tooltip
                      />

                      <el-table-column
                        prop="name"
                        label="实测/计算洪峰流量"
                        align="center"
                        show-overflow-tooltip
                        width="150"
                      >
                        <template #default="{ row }">
                          {{
                            `${row.fcMxq !== '' && row.fcMxq != undefined ? row.rlMxq : '--'}/${
                              row.fcMxq !== '' && row.fcMxq != undefined ? row.fcMxq : '--'
                            }`
                          }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="实测/计算洪现时间"
                        align="center"
                        show-overflow-tooltip
                        width="150"
                      >
                        <template #default="{ row }">
                          {{
                            `${row.fcMxt !== '' && row.fcMxt != undefined ? row.rlMxt : '--'}/${
                              row.fcMxt !== '' && row.fcMxt != undefined ? row.fcMxt : '--'
                            }`
                          }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="实测/计算洪量"
                        align="center"
                        show-overflow-tooltip
                        width="150"
                      >
                        <template #default="{ row }">
                          {{
                            `${row.fcV !== '' && row.fcV != undefined ? row.rlV : '--'}/${
                              row.fcV !== '' && row.fcV != undefined ? row.fcV : '--'
                            }`
                          }}
                        </template>
                      </el-table-column>

                      <el-table-column
                        prop="address"
                        label="实测/计算最高水位"
                        align="center"
                        show-overflow-tooltip
                        width="150"
                      >
                        <template #default="{ row }">
                          {{
                            `${row.rlMxz !== '' && row.rlMxz != undefined ? row.rlMxz : '--'}/${
                              row.rlMxz !== '' && row.rlMxz != undefined ? row.fcMxz : '--'
                            }`
                          }}
                        </template>
                      </el-table-column>

                      <el-table-column
                        prop="flCoef"
                        label="产流系数"
                        align="center"
                        show-overflow-tooltip
                      />
                    </el-table>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 特征值 -->

  <!-- 结果详情 -->
  <resultDetail ref="resDetailRef" />
</template>
<script setup>
import { ref, reactive, onMounted, watch, defineEmits, nextTick } from 'vue'
import { useDispatchManageBlkcd } from '@/store/modules/dispatch-manage.js'
import { ElMessage, ElMessageBox } from 'element-plus'
//水文
import SwDispatchChart from '@/components/app-echart/sw-dispatch-chart.vue'
//水库
import SkDispatchChart from '@/components/app-echart/sk-dispatch-chart.vue'
//特征值
// import mulTable from './cpns/mulTable.vue'
import EigenValue from './cpns/EigenValue/index.vue'
//详情
import resultDetail from './cpns/resultDetail/index.vue'
// import sectionArr from '@/assets/data/com_data/sec_info.json'
// import cal_result_new from '@/assets/data/com_data/cal_result_new.json'
// import xaj_verify_info from '@/assets/data/com_data/xaj_verify_info.json'
// import { getXajccResult } from '@/services/modules/model-verify'
import {
  getGradeSections,
  getManualSchemesresult,
  getDispatchSchemeDetail,
  // 推送
  postSaveResultPush,
  getAiForecastResult
} from '@/services/modules/dispatch-manage'
import { useDispatchManage } from '@/store/modules/dispatch-manage.js'
import { assignUniqueIds } from '@/utils/index'
import emitter from '@/utils/bus'
const props = defineProps({
  ccInfo: {
    type: Array,
    default: () => []
  },
  tabsId: {
    type: String,
    default: ''
  },
  scid: {
    type: String,
    default: ''
  },
  checkedSc: {
    type: Array,
    default: () => []
  },
  showBtn: {
    type: Boolean,
    default: true
  },
  // 流域
  watershedId: {
    type: String,
    default: ''
  },
  //方案名称
  scNameObj: {
    type: String,
    default: ''
  }
})
const mulTableRef = ref(null)
const resDetailRef = ref(null)
const dialogVisible = ref(false)
const ccInfos = ref([])
const currentIndex = ref(0)
const currentTime = ref(0)
const defaultProps = {
  children: 'children',
  label: 'groupName'
}
let state = reactive({
  checkedSw: false,
  //水文
  znData: [],
  // 推荐模型名称
  modelNamePush: '',
  radioItem: '',
  waterShow: 1,
  checkedScheme: [],
  modelInfo: [],
  checkModelType: [],
  checkModels: [],
  models: [],
  modelType: [],
  showBgItem: ['图', '混', '表'],
  flagItem: 0,
  tableShow: true,
  activeName: ['1'],
  blkcdName: '',
  // activeName: 'first',
  showTable: true,
  collapseActive: '1',
  collapseActiveSource: false,
  servers: [],
  waterFlag: 1,
  sectionArr: [],
  blkcdId: '',
  tabNewData: [],
  evaResult: {},
  // tableData: [],
  //时间
  sysTimes: [],
  //降雨量
  rainArr: [],
  //实测流量
  rqArr: [],
  //模拟流量
  fqArr: [],
  //实测水位
  rzArr: [],
  //模拟水位
  fzArr: [],
  itemWater: '',
  itemIndex: '',
  childSchemeList: [],
  // 多选框选中的值
  checkValue: [],
  // 存储调度方案的值，弹框关闭或者选择其它水库时将其清空
  scidStoreArr: [],
  // 暂时存储计算结果的数组
  serversStore: [],
  num: 0
})
function switchData() {
  // if (state.num <= arr.length - 1) {
  //   ++state.num

  // }
  for (let index = 0; index < 80; index++) {
    state.num = index
  }

  console.log(state.num, '数组11')

  // return state.num
}
// 多选框选择调度方案回调
async function handleCheckBox() {
  // 暂存没有选择过的scid
  let zcIdArr = []
  nextTick(() => {
    emitter.emit('clearEcharts')
    emitter.emit('initEcharts')
  })
  if (state.checkValue.length > 0) {
    state.checkValue.forEach(async (e) => {
      // 如果结果数组中没有选中的这个方案的id
      console.log(state.scidStoreArr, '数组id')

      if (!state.scidStoreArr.includes(e)) {
        zcIdArr.push(e)
      } else {
        // 如存在 则将结果数组中的对应checkValue的scid的对象全部拿出
        state.servers = []

        state.serversStore.forEach((a) => {
          if (state.checkValue.includes(a?.scid)) {
            state.servers.push(a)
          }
        })
        console.log(state.servers, '全部')
      }
    })
    // 调用接口获取结果
    await acceptComputedResult(zcIdArr)
    if (zcIdArr.length) {
      state.servers = []
      state.serversStore.forEach((a) => {
        if (state.checkValue.includes(a?.scid)) {
          state.servers.push(a)
        }
      })
    }
    // state.checkValue.forEach(async (e) => {
    //   // 如果结果数组中没有选中的这个方案的id
    //   if (!state.scidStoreArr.includes(e)) {
    //     // 则调用接口获取
    //     await acceptComputedResult(e)
    //     state.servers = JSON.parse(JSON.stringify(state.serversStore))
    //     console.log(state.servers, '多方案')
    //   } else {
    //     // 如存在 则将结果数组中的对应checkValue的scid的对象全部拿出
    //     state.servers = []

    //     state.serversStore.forEach((a) => {
    //       if (state.checkValue.includes(a?.scid)) {
    //         state.servers.push(a)
    //       }
    //     })
    //   }
    // })
  } else {
    state.servers = []
    state.sysTimes = []
    state.checkedSw = false
  }
  handleIspush(state.servers)
}

// 获取调度方案
const handleChangeSelect = () => {
  state.childSchemeList = []
  return new Promise((resolve, reject) => {
    getDispatchSchemeDetail({ scid: props.scid, scBelong: 0 }).then((res) => {
      if (res.code === 200) {
        // 获取子方案
        state.childSchemeList = res.data?.models?.info
        // 默认选中第一个子方案
        state.checkValue = [state.childSchemeList[0]?.scid]
        resolve(res.data)
      }
    })
  })
}

// 获取智能结果
function acceptAiForecastResult(scid, blkcd) {
  state.sysTimes = []
  getAiForecastResult({ scid: scid, blkcd: blkcd }).then((res) => {
    if (res.code == 200) {
      state.znData = res.data
      state.znData.forEach((item) => {
        state.sysTimes.push(item.tm)
      })
      state.servers.push({ ccResult: res.data, warnInfo: {} })
    }
  })
}
watch(
  () => {
    props.scid
  },
  async () => {
    // 获取子方案列表

    if (props.scid) {
      await handleChangeSelect()

      // 切换方案 获取水库
      await acceptSectionArr()
    } else {
      state.servers = []
      state.childSchemeList = []
      state.sectionArr = []
    }
  },
  {
    deep: true,
    immediate: true
  }
)
// 获取计算结果
function acceptComputedResult(scidArr) {
  if (scidArr.length > 0 && scidArr[0]) {
    return new Promise((resolve, reject) => {
      getManualSchemesresult({
        scid: scidArr.join(),
        blkcd: state.blkcdId
      }).then((res) => {
        if (res.code === 200) {
          if (res.data.length) {
            let arr = []
            arr = res.data.map((item) => {
              return {
                ...item,
                result: [{ ccResult: item.ccResult, warnInfo: item.warnInfo }]
              }
            })
            // if (state.checkValue.length > 1) {
            state.serversStore.push(...arr)
            // } else {
            //   state.serversStore = arr
            // }
            state.serversStore.forEach((e) => {
              state.scidStoreArr.push(e.scid)
            })

            // 数组去重 结果去重
            state.serversStore = Array.from(
              new Set(state.serversStore.map(JSON.stringify)),
              JSON.parse
            )
            // scid去重
            state.scidStoreArr = Array.from(new Set(state.scidStoreArr))
          }
          resolve(res.data)
        }
      })
    })
  }
}
//点击推送
function handleSelectionChange(row) {
  // 推送的模型名称

  postSaveResultPush({
    scid: row.scid,
    blkcd: row.blkcd,
    model: row.model,
    pscid: props.scid
  }).then((res) => {
    if (res.code == 200) {
      state.modelNamePush = row.modelName
      state.radioItem = row.scid

      ElMessage.success('推送成功')
    }
  })
}
// 判断是否已经推送
function handleIspush(servesData) {
  let newArr = servesData.filter((item) => {
    return item.isPush == 1
  })

  state.radioItem = newArr[0]?.scid
  state.modelNamePush = newArr[0]?.modelName
}

function handleDialog() {
  state.collapseActiveSource = !state.collapseActiveSource
}
function updateLeafProperty(data) {
  // 递归函数，只修改最后一层的属性名
  const isLeaf = (item) => !Array.isArray(item.children)
  const update = (item) => {
    if (isLeaf(item)) {
      if (Object.prototype.hasOwnProperty.call(item, oldPropertyName)) {
        item[newPropertyName] = item[oldPropertyName]
        delete item[oldPropertyName]
      }
    } else {
      item.children = item.children.map(update)
    }
    return item
  }
  const oldPropertyName = 'blknm'
  const newPropertyName = 'groupName'
  state.sectionArr = data.map(update)
  assignUniqueIds(state.sectionArr)
  console.log(state.sectionArr, 'state.sectionArr')
  handleClickTabs(state.sectionArr[0].children[0].children[0].children[0], 0)
}

// 搜索水库
function handleClickIcon(name) {
  getGradeSections({ scid: props.scid, blknm: name || '' }).then((res) => {
    if (res.code === 200) {
      state.sectionArr = res.data

      updateLeafProperty(state.sectionArr)
    }
  })
}
// 获取水库 默认选中第一个水库
function acceptSectionArr() {
  return new Promise((resolve, reject) => {
    getGradeSections({ scid: props.scid, blknm: '' }).then((res) => {
      if (res.code === 200) {
        state.sectionArr = res.data
        updateLeafProperty(state.sectionArr)
        // 默认选中第一个水库
        // if (state.sectionArr.length) {
        //   handleClickTabs(state.sectionArr.filter((v) => v.sttp == 'RR')[0], 0)
        // }
        resolve(res.data)
      }
    })
  })
}
//展开 混
function handleClickShow(val) {
  nextTick(() => {
    // emitter.emit('clearEcharts')
    emitter.emit('initEcharts')
  })
  // state.showTable = !state.showTable;
  state.flagItem = val
  if (val == 0) {
    // 图
    state.showTable = true
    state.tableShow = true
  } else if (val == 1) {
    // 混
    state.showTable = false
    state.tableShow = true
  } else {
    //表
    state.showTable = false
    // 将图关闭
    state.tableShow = false
  }
  nextTick(() => {
    // emitter.emit('clearEcharts')
    emitter.emit('initEcharts')
  })
}

function dateFormat(str) {
  var date = new Date(new Date(str).getTime())
  var Y = date.getFullYear() + '-'
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
  var h = ' ' + (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
  var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
  var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  return Y + M + D + h + m + s
}

const emit = defineEmits(['showDialog'])

// 放大
function handleAmplify() {
  resDetailRef.value.handleOpenModal(
    props.scid || '',
    props.watershedId,
    state.blkcdId,
    props.scNameObj
  )
}

// 定位
function handleClickTabsPosion(data) {
  emitter.emit('fixedPosition', data)
}
// 点击水库或水文站
async function handleClickTabs(item, index) {
  if (!item?.blkcd) {
    return false
  }
  if (item) {
    state.blkcdName = item?.groupName
    state.blkcdId = item?.blkcd ? item?.blkcd : ''
    currentIndex.value = index
    acceptAiForecastResult(props.scid, state.blkcdId)
    state.checkedSw = false
    // 当选中的为水库时
    if (item.sttp == 'RR') {
      // 点击为水库
      state.waterShow = 1
      state.waterFlag = 2
    } else {
      // 点击的为水文站
      state.waterShow = 2
      state.waterFlag = 1
    }
    // 点击水库，将存储的方案结果和id，图表传的值 都清空，并默认选中第一个方案
    state.serversStore = []
    state.scidStoreArr = []
    state.servers = []

    // state.checkValue = [state.childSchemeList[0]?.scid]
    //点击方案获取计算结果
    handleCheckBox()
  }
}
</script>
<style lang="less" scoped>
.comput-result {
  width: 100%;
  font-size: 12px;
  height: 100%;
  background: white;
  .result-box {
    width: 100%;
    height: 100%;
    display: flex;
    .tabs-box {
      width: 250px;
      height: calc(100% - 10px);
      margin-top: 10px;
      margin-right: 10px;
      // padding-right: 5px;
      border: 1px solid #c8c2c29d;
      box-sizing: border-box;

      border-radius: 3px;
      overflow: hidden;
      .tabs-title {
        // margin-top: 15px;
        // margin-left: 10px;
        height: 30px;
        background: #f2f2f2;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        span {
          font-weight: 600;
        }
      }
      :deep(.el-tree) {
        height: calc(100% - 40px);
        overflow-y: auto;
        margin-top: 5px;
        .el-tree-node {
          &.is-focusable.is-current {
            > div:nth-of-type(1) {
              color: #409eff;
              font-weight: 600;
              font-size: 15px;
            }
          }

          .el-tree-node__content {
            margin-top: 5px;
          }
          .el-tree-node__label {
            display: flex;
          }
        }
        .position-btn {
          margin-right: 20px;
        }
        .position-btn:hover {
          color: #0154db;
        }
        .tree-item {
          &.active {
            span {
              color: #0154db;
            }
          }
          .node {
            width: 100px;
            display: inline-block;
            overflow: hidden; /* 确保超出容器的文本被裁剪 */
            white-space: nowrap; /* 确保文本在一行内显示 */
            text-overflow: ellipsis; /* 超出部分显示为省略号 */
            // font-size: var(--content-fontsize);
          }
        }
      }
      :deep(.el-collapse) {
        height: calc(100% - 30px);
        .mg10 {
          margin-left: 10px;
          width: 100%;
          text-align: center;
        }
        .el-collapse-item.is-active {
          height: calc(100% - 82px);
          .el-collapse-item__wrap {
            height: 100%;
            .el-collapse-item__content {
              height: calc(100% - 80px);
              overflow-y: auto;
            }
          }
        }
      }
      .tabs-list {
        // height: calc(100% - 30px);
        // background: #d7d4d427;
        // overflow-y: auto;
        .list-item {
          display: flex;
          align-items: center;
          width: 100%;
          height: 30px;
          text-align: center;
          cursor: pointer;
          &.active {
            span {
              color: #0154db;
            }
          }
          span {
            width: 100%;
            color: black;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .position-btn {
            margin-right: 20px;
          }
          .position-btn:hover {
            color: #0154db;
          }
        }
        .list-item:hover {
          width: 100%;
          height: 30px;
          cursor: pointer;
          span {
            color: #0154db;
          }
        }
      }
    }
    .box-right {
      flex: 1;
      width: calc(100% - 205px);
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      .comput-times {
        width: 100%;
        height: 70px;
        .times-title {
          height: 30px;
          span {
            font-weight: 600;
          }
        }
        .times-list {
          display: flex;
          width: 100%;
          height: 40px;
          overflow-x: auto;
          white-space: nowrap;
          .times-item {
            width: 200px;
            height: 30px;
            border: 1px solid gray;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            padding: 0 15px;
            cursor: pointer;
            &.active {
              span {
                color: #0154db;
              }
            }
            &:hover {
              color: #0154db;
            }
            span {
              color: gray;
            }
          }
        }
      }
      .switch-box {
        width: 100%;
        height: 100%;
        .right-btn-plus {
          width: 100%;
          height: 120px;
          .top-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            width: 100%;
            // height: 70px;

            .top-box-left {
              // display: flex;
              align-items: center;
              width: calc(100% - 100px);
              .title {
                display: flex;
                align-items: center;
                width: 100%;
                .left-title {
                  width: 80px;
                  font-size: 14px;
                  font-weight: 600;
                  color: #797979;
                }
                .left-list {
                  white-space: nowrap;
                  width: calc(100% - 80px);
                  overflow-x: auto;
                }
              }
            }
            .top-box-right {
              display: flex;
              align-items: center;
              // width: 100px;
              margin-right: 10px;
              height: 100%;
            }
          }
          .bottom-btn-box {
            width: 100%;
            display: flex;
            align-items: center;
            // justify-content: flex-start;
            justify-content: space-between;

            .ul-box {
              display: flex;
              // justify-content: space-around;
              // align-items: center;
              // line-height: 100%;
              // margin-top: 10px;
              margin-right: 32px;
              text-align: center;
              // margin-bottom: 20px;
              width: 100px;
              height: 100%;
              border-radius: 25px;
              background-color: rgba(1, 84, 219, 0.3);

              .ul-item {
                width: 30px;
                height: 20px;
                line-height: 20px;
                border-radius: 20px;
                // background-color: #0154db;
                color: #ffffff;
                cursor: pointer;
                &:hover {
                  background-color: #0154db;
                  color: wheat;
                }
              }
              .clickBg {
                background-color: #0154db;
              }
            }
            .water-name {
              color: #409eff;
              font-size: 14px;
            }
            .flex-right-box {
              display: flex;
              align-items: center;
              width: 120px;
              margin-right: 20px;
              text-align: center;
              font-size: 14px;
              .key {
                color: #797979;
              }
              .value {
                color: #409eff;
              }
            }
          }
          .title {
            line-height: 50px;
            color: #409eff;
            margin-right: 40%;
            font-size: 14px;
          }
          .btn-plus {
            margin-top: 10px;
            font-size: 25px;
            font-weight: bold;
          }
        }
        .echarts-container {
          height: calc(100% - 120px);
          overflow-y: auto;
        }

        .flex-box {
          // margin-top: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .flex-right-box {
            display: flex;
            align-items: center;
            // line-height: 100%;
            margin-right: 20px;
            text-align: center;
            font-size: 14px;
            .key {
              color: #797979;
            }
            .value {
              color: #409eff;
            }
          }
        }

        .echarts-table-box {
          display: flex;
          width: 100%;
          // height: calc(100% - 200px);
          height: 680px;
          // height: 400px;
          position: relative;
          // overflow-y: auto;
          // overflow-x: hidden;

          .echarts-box {
            flex: 1;
            min-width: 49%;
            height: 100%;
            // height: calc(100%);
            // padding: 5px;
            position: relative;
            .show-btn {
              cursor: pointer;
              position: absolute;
              right: 0px;
              top: 0px;
            }
          }
          .table-box {
            width: 50%;
            // width: 100%;
            max-width: 100%;
            margin-left: 1%;
            position: relative;
            .hide-btn {
              cursor: pointer;
              position: absolute;
              height: 20px;
              top: 10px;
              right: 0;
              z-index: 10;
            }
            .el-table {
              height: 100%;
            }
            :deep(.el-tabs) {
              z-index: 11;
              height: 100%;
              .el-tabs__content {
                height: calc(100% - 55px);
                .el-tab-pane {
                  height: 100%;
                  .el-table {
                    height: 100%;
                    overflow-y: auto;
                  }
                }
              }
            }
          }
          .table-box-show {
            width: 100% !important;
          }
        }
        .dropDown-box {
          // height: 300px;
          height: auto;
          width: 100%;
          .el-collapse-item {
            :deep(.el-collapse-item__arrow) {
              display: none;
            }
            .coll-title {
              display: flex;
              position: relative;
              width: 100%;
              .ip-word {
                margin-right: 5px;
                span {
                  color: #0b31d8;
                }
              }
              .ip-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                right: 10px;
                top: 15px;
                cursor: pointer;
                .downArrow1 {
                  display: inline-block;
                  width: 20px;
                  height: 20px;
                  background-image: url(@/assets/images/dispatch/u61.png);
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                }
                .downArrow2 {
                  display: inline-block;
                  width: 20px;
                  height: 20px;
                  transform: rotate(-180deg);
                  background-image: url(@/assets/images/dispatch/u61.png);
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                }
              }
            }
          }
          .coll-main {
            height: 100%;

            width: 100%;
          }
        }
      }
    }
  }
}
</style>
